<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 
      插值 模板 
      功能： 输出 实例 上 文本信息
      注意：
        1 js语法环境
        2 输出 表达式 （运算、变量、三目 短路）
        3 变量 只会去 实例上查找 
        4 js内置全局变量
     -->
     {{ msg }}
     {{ parseInt('1.234') }}
     {{ 1+3+5+8 }}
     {{ isBeauty? '美女嫁给我吧': '你是个好姑娘' }}
     <!-- {{ alert(1) }} -->
     {{ msg2 }}
  </div>
  <script src="./vue.global.js"></script>
  <script>
    const msg2 = '这是js的变量'

    const { createApp } = Vue;
    // 创建 应用实例
    const app = createApp({
      data(){
        return {
          msg: '你好vue3',
          isBeauty: false
        }
      },
      methods: {
        changeMsg() {
          this.msg = '值修改了'
        }
      }
    })
    // 实例渲染
    app.mount('#app');
  </script>
</body>
</html>